<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<div id="outer">
    <ul id="inner">
        <li>tomcat</li>
        <li>jboss</li>
        <li>jetty</li>
    </ul>
</div>
<button type="button" onclick="changeDocument()">修改DOM元素</button>
<script type="text/javascript">
    let newNode = $("<li>我是新增的元素</li>") ;
    function changeDocument() {
        $("#inner").after(newNode) ;
        $("#inner").append(newNode) ;
        $("#inner").appendTo(newNode) ;
        $("#inner").before(newNode) ;
        newNode.insertBefore( $("#inner") ) ;
        $("ul li:last").remove() ;
        $("ul li:last").replaceWith(newNode) ;
        $("#inner").empty();
        let x = $("#outer").offset();
        alert("Top: " + x.top + " Left: " + x.left);
    }
</script>
</body>
</html>